<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单字段公共事件</title>
</head>
<body>
    <form id="myForm">
        姓名：<input type="text" name="username" value="">
    </form>
</body>
<script>
    const myForm = document.getElementById('myForm');
    const inputDOM = myForm.elements['username'];
    // 获取焦点时，如果背景色不是红色，则将背景设置为黄色
    inputDOM.addEventListener('focus',(event)=>{
        console.log('event.type:',event.type);
        let ele = event.target; // 事件发生所在元素.
        if(ele.style.backgroundColor !== 'red'){
            ele.style.backgroundColor = 'yellow'
        }
    });
    // 失去焦点时，校验是否全部为数字，未通过则设置底色为红色，通过则无色。
    inputDOM.addEventListener('blur',(event)=>{
        console.log('event.type:',event.type);
        let ele = event.target;
        if(/^\d+$/.test(ele.value)){
            ele.style.backgroundColor = '';
        } else {
            ele.style.backgroundColor = 'red'
        }
    })
    // 失去焦点且 value 发生变化时，校验是否全部为数字，未通过则设置底色为红色，通过则无色。
    inputDOM.addEventListener('change',(event)=>{
        console.log('event.type:',event.type);
        let ele = event.target;
        if(/^\d+$/.test(ele.value)){
            ele.style.backgroundColor = '';
        } else {
            ele.style.backgroundColor = 'red'
        }
    })
</script>
</html>